<script setup>


import {ref} from "vue";

const value1 = ref('')
const elderList = ref({
  id: 1,
  number: '01',
  name: '刘姥姥',
  age: 65,
  medicalInsurance: '城镇职工医保',
  admissionTime: '2018-06-06 09:01:50',
  nurse: '护士1',
  room: '1101',
  nurseLevel: '三级护理',
  selected: false
})
const disabledDate = (time) => {
  return time.getTime() > Date.now()
}
const shortcuts = [
  {
    text: 'Today',
    value: new Date(),
  },
  {
    text: 'Yesterday',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24)
      return date
    },
  },
]
</script>

<template>
  <div style="margin: 20px;">
    <el-breadcrumb separator="/" style="line-height:35px">
      <el-breadcrumb-item><span style="color: #7A7A7A;">护理管理</span></el-breadcrumb-item>
      <el-breadcrumb-item><span style="color: #7A7A7A;">护理管理</span></el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <el-card>
    <el-form label-width="80px">
      <el-row :gutter="50">
        <el-col :span="8">
          <el-form-item label="老人姓名">
            <el-input placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="护理级别">
            <el-select placeholder="请输入" default-first-option="5">
              <el-option label="一级护理" value="0"></el-option>
              <el-option label="二级护理" value="1"></el-option>
              <el-option label="三级护理" value="2"></el-option>
              <el-option label="特级护理" value="4"></el-option>
              <el-option label="全部" value="5"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="责任护士">
            <el-select placeholder="请输入状">
              <el-option label="护士1" value="0"></el-option>
              <el-option label="护士2" value="1"></el-option>
              <el-option label="护士3" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

      </el-row>
      <el-row :gutter="50">
        <el-col :span="8">
          <el-form-item label="区域">
            <el-select placeholder="请输入" default-first-option="5">
              <el-option label="康复一区" value="0"></el-option>
              <el-option label="康复二区" value="1"></el-option>
              <el-option label="康复三区" value="2"></el-option>

            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="房间">
            <el-select placeholder="请输入" default-first-option="5">
              <el-option label="全部" value="0"></el-option>
              <el-option label="1101" value="1"></el-option>
              <el-option label="1102" value="2"></el-option>
              <el-option label="1103" value="4"></el-option>
              <el-option label="1104" value="5"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="床位号">
            <el-select placeholder="请输入">
              <el-option label="01" value="0"></el-option>
              <el-option label="02" value="1"></el-option>
              <el-option label="03" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

      </el-row>
      <el-row :gutter="50">
        <el-col :span="8">
          <el-form-item label="时间范围">
            <el-date-picker
                v-model="value1"
                type="date"
                placeholder="Pick a day"
                :disabled-date="disabledDate"
                :shortcuts="shortcuts"
                size="default"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item>
            <el-checkbox-group>
              <el-checkbox label="欠费(20)" name="type"/>
              <el-checkbox label="危急(1)" name="type"/>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item>
            <el-button type="primary">搜索</el-button>
            <el-button type="info">重置</el-button>
          </el-form-item>
        </el-col>

      </el-row>
    </el-form>
  </el-card>
  <!--  康复区-->
  <el-row :gutter="10">
    <el-col :span="18">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span style="font-size: 18px;font-weight: bold">康复一区(66)</span>
          <span style="float: right;color:#9a9797">2025-05-05 15:20:20 每5分钟刷新一次</span>
        </div>
        <el-divider></el-divider>
        <div slot="header" class="clearfix">
          <el-tag type="danger"></el-tag>
          一级护理
          <el-tag type="primary"></el-tag>
          二级护理
          <el-tag type="success"></el-tag>
          三级护理
          <el-tag type="warning"></el-tag>
          特级护理
        </div>
<!--        卡片布局-->
        <div>
          <el-row  :gutter="20">
            <el-col style="margin-top:10px" v-for="i in 10" :span="8">
              <el-card>
                <el-row>
                  <el-col :span="6">

                    <div class="header">
                     <span class="number">
                     <span class="circle">01</span>
                     </span>
                    </div>
                  </el-col>
                  <el-col :span="18">
                    <span class="name">刘姥姥</span>
                    <span class="gender">女</span>
                    <span class="age">65岁</span>
                    <div class="insurance">城镇职工医保</div>
                  </el-col>
                </el-row>
                <div class="details">
                  <p><span>入院时间:</span> 2018-06-06 09:01:50</p>
                  <p><span>责任护士:</span> 护士1</p>
                  <p><span>房间:</span> 1101</p>
                  <p><span>护理级别:</span> <span class="nurse - level">三级护理</span></p>
                  <p><span class="debt - status">欠</span></p>
                </div>
              </el-card>
            </el-col>
          </el-row>

        </div>
      </el-card>

    </el-col>
    <el-col :span="6">
      <el-card>
        <h3 style="margin:0px">老人信息</h3>
        <el-divider/>
        <el-row>
          <el-col :span="6">

            <div class="header">
                     <span class="number">
                     <span class="circle">01</span>
                     </span>
            </div>
          </el-col>
          <el-col :span="18">
            <span class="name">刘姥姥</span>
            <span class="gender">女</span>
            <span class="age">65岁</span>
            <div class="insurance">城镇职工医保</div>
          </el-col>
        </el-row>
        <div class="details">
          <p><span>档案号:</span> JK201806061552001</p>
          <p><span>证件号:</span> 613000000000000068</p>
          <p><span>联系电话:</span> 156000000001</p>
          <el-divider/>
          <p><span>住院区域:</span>康复一区 </p>
          <p><span>房间:</span> 1102</p>
          <p><span>床位号:</span> 01</p>
          <p><span>主管医师:</span> 张医师</p>
          <p><span>责任护士:</span> 护士1</p>
          <p><span>护工:</span> 杨护工</p>
          <p><span>护理级别:</span> 三级护理</p>
          <p><span>入院诊断:</span> 慢性疾病</p>
          <el-divider/>
          <p><span>入院时间:</span> 2018-06-06  09:01:50</p>
          <p><span>入住天数:</span> 30天</p>
          <p><span>预存金额:</span> ￥ 3000.00</p>
          <p><span>费用金额:</span> ￥ 0.00</p>
          <p ><span>住院金额:</span><span style="color: red">￥ 0.00</span> </p>
        </div>
      </el-card>
    </el-col>
  </el-row>

</template>

<style scoped>
/* 整体容器样式 */
.patient-info {
  border: 2px solid #42b983;
  border-radius: 5px;
  padding: 15px;
  width: 300px;
}

/* 头部信息样式 */
.header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

/* 编号圆圈样式 */
.circle {
  background-color: #e6f7ff;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  margin-right: 10px;
}

/* 姓名样式 */
.name {
  font-size: 20px;
  font-weight: bold;
}

/* 性别和年龄样式 */
.gender,
.age {
  margin-left: 5px;
}

/* 医保类型样式 */
.insurance {
  margin-bottom: 10px;
}

/* 详情段落样式 */
.details p {
  margin: 10px 0;
}

/* 详情标签样式 */
.details span {
  color: #666;
  width: 100px;
  display: inline-block;
}

/* 护理级别样式 */
.nurse-level {
  color: #42b983;
}

/* 欠费状态样式 */
.debt-status {
  background-color: #f56c6c;
  color: white;
  padding: 3px 6px;
  border-radius: 2px;
}
</style>
